<template>
  <div class="app-container">
    <panel-group
      class="top"
      :count01="config.data.length"
      :countT0="configFinish.data.length"
      :weatherData="weatherData"
      :sunData="sunData"
      :count20="configWaitMessage.data.length"
    />
    <div class="center">
      <Card style="width:480px;margin-right: 20px">
        <p slot="title">
          <Icon type="ios-paper-outline"></Icon>待办任务：
        </p>
        <dv-scroll-board
          class="config"
          :config="config"
          style="width:450px;height:150px;color: #1a1a1a;font-weight:bold"
        />
      </Card>
      <Card style="width:480px;margin-right: 20px">
        <p slot="title">
          <Icon type="ios-list"></Icon>已办任务：
        </p>
        <dv-scroll-board
          class="configFinish"
          :config="configFinish"
          style="width:450px;height:150px;color: #1a1a1a;font-weight:bold"
        />
      </Card>
      <clock-effect />
    </div>
    <div class="right">
      <Card style="width:1040px;margin-right: 17px">
        <p slot="title">
          <Icon type="ios-alarm-outline"></Icon>未读消息：
        </p>
        <dv-scroll-board
          class="configWaitMessage"
          :config="configWaitMessage"
          style="width:950px;height:180px;color: #1a1a1a;font-weight:bold"
        />
      </Card>
      <div id="customizedCalendar">
        <div>
          <el-calendar :first-day-of-week="7" v-model="value">
            <template slot="dateCell" slot-scope="{date, data}">
              <div
                slot="reference"
                class="div-Calendar"
                @click="clickCalendar(data)"
                style="position: relative;z-index: 10"
              >
                <p>{{ data.day.split('-').slice(2).join('-') }}</p>
              </div>
              <div v-if="data.isSelected" id="selectP"></div>
            </template>
          </el-calendar>
          <div id="button">
            <el-button @click="skip('preYear')" type="primary" round size="mini">
              <i class="el-icon-arrow-left"></i>年
            </el-button>
            <el-button @click="skip('preMonth')" type="warning" round size="mini">
              <i class="el-icon-arrow-left"></i>月
            </el-button>
            <el-button @click="skip('preDay')" type="success" round size="mini">
              <i class="el-icon-arrow-left"></i>日
            </el-button>
            <el-button @click="skip('today')" type="info" round size="mini">今天</el-button>
            <el-button @click="skip('postDay')" type="success" round size="mini">
              日
              <i class="el-icon-arrow-right"></i>
            </el-button>
            <el-button @click="skip('postMonth')" type="warning" round size="mini">
              月
              <i class="el-icon-arrow-right"></i>
            </el-button>
            <el-button @click="skip('postYear')" type="primary" round size="mini">
              年
              <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import moment from "moment";
import PubSub from "pubsub-js";
import { getWeather, getSunrise } from "@/api/weather/weather";
import clockEffect from "@/views/components/clockEffect";
import task from "@/api/workflow/task";
import { scollList } from "@/api/workflow/waitMessage";
import PanelGroup from "@/views/components/PanelGroup";
export default {
  name: "viewIndex",
  dicts: ["act_status", "purchase_type"],
  components: {
    clockEffect,
    PanelGroup
  },
  data() {
    return {
      //天气信息
      weatherData: {},
      value: new Date(),
      station: "",
      sunData: {
        sunrise: "05:42",
        sunset: "18:32"
      },
      config: {
        header: ["任务名称", "创建时间", "流程名称", "流程状态"],
        data: [],
        // waitTime: 1000000,
        columnWidth: [100, 180, 120, 140],
        rowNum: 3,
        headerBGC: "#BFCBD9",
        oddRowBGC: "#FFFFFF",
        evenRowBGC: "#E6E6E6"
      },
      configFinish: {
        header: ["任务名称", "启动时间", "流程名称", "流程办理人"],
        data: [],
        // waitTime: 1000000,
        columnWidth: [100, 180, 120, 140],
        rowNum: 3,
        headerBGC: "#BFCBD9",
        oddRowBGC: "#FFFFFF",
        evenRowBGC: "#E6E6E6",
        align: ["center", "center", "center", "center"]
      },
      configWaitMessage: {
        header: ["任务名称", "消息信息"],
        data: [],
        headerBGC: "#BFCBD9",
        oddRowBGC: "#FFFFFF",
        evenRowBGC: "#E6E6E6",
        // waitTime: 1000000,
        rowNum: 3,
        columnWidth: [100]
      },
      countList: {
        count01: 300,
        countT0: 500,
        countS0: 600,
        count05: 200,
        count10: 100,
        count15: 400,
        count20: 600,
        count25: 400
      }
    };
  },
  computed: {
    selectDate() {
      return moment(this.value).format("YYYY-MM-DD");
    }
  },
  created() {
    this.getSun();
  },
  mounted() {
    this.getWeather();
    this.getscroll();
    this.getScollFinish();
    this.scollList();
  },
  watch: {},
  methods: {
    skip(flag) {
      if (flag === "preYear")
        this.value = new Date(
          this.value.setFullYear(this.value.getFullYear() - 1)
        );
      else if (flag === "preMonth")
        this.value = new Date(this.value.setMonth(this.value.getMonth() - 1));
      else if (flag === "preDay")
        this.value = new Date(this.value.setDate(this.value.getDate() - 1));
      else if (flag === "today") this.value = new Date();
      else if (flag === "postDay")
        this.value = new Date(this.value.setDate(this.value.getDate() + 1));
      else if (flag === "postMonth")
        this.value = new Date(this.value.setMonth(this.value.getMonth() + 1));
      else if (flag === "postYear")
        this.value = new Date(
          this.value.setFullYear(this.value.getFullYear() + 1)
        );
    },
    clickCalendar(data) {
      PubSub.publish("uploadWarningResultWarningTime", data.day);
    },
    /** 查询在线天气数据 **/
    getWeather() {
      getWeather("320105").then(response => {
        this.weatherData = response.data;
      });
    },
    getSun() {
      getSunrise("320105").then(response => {
        this.sunData = response.data;
        this.loading = false;
      });
    },
    async getscroll() {
      task.getscroll().then(response => {
        this.config.data = response;
        let rows = document.querySelector(".config").querySelector(".rows");
        if (this.config.data.length == 0) {
          // document.querySelector('.rows').innerHTML = '暂无数据';

          rows.innerHTML = "暂无数据";
          rows.classList.add("dev_center");
          // rows.style.display = "flex";
          // rows.style["align-items"] = "center";
          // rows.style["justify-content"] = "center";
          // rows.style.color = "#000";
        } else {
          rows.classList.remove("dev_center");
        }
        this.config = { ...this.config };
      });
    },

    async getScollFinish() {
      task.getScollFinish().then(response => {
        this.configFinish.data = response;
        let rows = document
          .querySelector(".configFinish")
          .querySelector(".rows");
        if (this.config.data.length == 0) {
          rows.innerHTML = "暂无数据";
          rows.classList.add("dev_center");
        } else {
          rows.classList.remove("dev_center");
        }
        this.configFinish = { ...this.configFinish };
      });
    },
    async scollList() {
      scollList().then(response => {
        this.configWaitMessage.data = response;
        let rows = document
          .querySelector(".configWaitMessage")
          .querySelector(".rows");
        if (this.configWaitMessage.data.length == 0) {
          rows.innerHTML = "暂无数据";
          rows.classList.add("dev_center");
        } else {
          rows.classList.remove("dev_center");
        }
        this.configWaitMessage = { ...this.configWaitMessage };
      });
    }
  }
};
</script>
  
  <style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: hidden;
  .top {
    height: 30%;
    width: 100%;
  }
  .center {
    display: flex;
    height: 34%;
    width: 100%;
  }
  .right {
    margin-top: 8px;
    #customizedCalendar {
      width: 30%;
      height: 100%;
      display: flex;
      #button {
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #selectP {
        width: 30px;
        height: 25px;
        background-color: #15ff2c;
        position: absolute;
        border-radius: 50%;
        opacity: 0.6;
      }
      ::v-deep .el-calendar__header {
        // 修改头部背景颜色
        background-color: #57617c;
        padding: 3px 5px;
        border: none;
        display: flex;
        justify-content: center;
        width: 97%;
        .el-calendar__button-group {
          // 隐藏原生按钮
          display: none;
        }

        .el-calendar__title {
          // 修改头部标题的字体颜色
          color: white !important;
          font-size: 18px;
          font-weight: bolder;
        }
      }
      ::v-deep .el-calendar__body {
        // 修改主题部分
        width: 97%;
        padding: 0;
      }
      ::v-deep .el-calendar-table {
        thead {
          th {
            // 修改头部星期部分
            padding: 0;
            background-color: #57617c;
            color: white;
          }
        }
        .is-selected {
          .el-calendar-day {
            p {
              // 选中日期颜色
              color: black;
            }
          }
        }
        .el-calendar-day {
          // 每天小块样式设置
          padding: 0;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          p {
            // 所有日期颜色
            color: black;
            z-index: 1;
            user-select: none;
            display: flex;
          }
        }
      }
      ::v-deep .el-calendar-table__row {
        .prev,
        .next {
          // 修改非本月
          .el-calendar-day {
            p {
              color: #f0d9d5;
            }
          }
        }

        td {
          // 修改每一个日期td标签
          &:first-child,
          &:last-child {
            background-color: #f5f5f5;
          }
        }
      }

      button {
        padding: 3px 8px;
      }
    }
    display: flex;
  }
}
::v-deep .dv-scroll-board .rows .row-item {
  height: auto !important;
  text-align: center;
}
::v-deep .dv-scroll-board .rows .row-item .ceil {
  //display: flex;
  white-space: normal;
  text-align: center;
  word-break: break-all;
  word-wrap: break-word;
  border: 1px solid #9a6e3a;
}
::v-deep .dv-scroll-board .header .header-item {
  border: 1px solid #9a6e3a;
  text-align: center;
}
</style>
  